<template>
  <a-modal
    title="词包增加组合赠词"
    v-model:visible="visible"
    :width="600"
    centered
    :label-col="{ style: { width: '125px' } }"
    :mask-closable="false"
    class="word-gift"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="submitting">
      <a-form
        hide-required-mark
        :model="composableState"
        :label-col="{ style: { width: '90px' } }"
        :wrapper-col="{ span: 18 }"
        ref="FormComposableRef"
      >
        <CbWordComposable
          :messageidisusi="itemres"
          ref="WordComposableRef"
          v-model:data="composableFields"
          v-model:CbNum="CbAllNum"
          :visible="visible"
          :record="record"
        />
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from 'vue'
import { useVModel } from '@vueuse/core'
import { FormInstance, message } from 'ant-design-vue'
import { FreeWord } from '@/services/promotion/updateFreeWord'
import CbWordComposable from '@/views/promotion/components/CbWordComposable.vue'
import type { Promotion } from '@/core/interfaces/promotion'
import { ComposableState, GiftKindEnum } from '@/views/promotion/interface'
import type { ConfigurationGiftType } from '@/services/promotion/editConfigurationGift'
import editConfigurationGift from '@/services/promotion/editConfigurationGift'
import type { OnlineActivityInfo } from '@/services/promotion/checkOnlineActivity'
import { type CbNumType } from '@/views/promotion/interface'
import { number, unknown } from 'zod'

interface Props {
  show: boolean
  submitting: boolean
  giftFields: {
    freeWords: FreeWord[]
    wordNum: number
  }
  composableState: ComposableState
  record: Partial<Promotion>
  activeKey: GiftKindEnum
  ConfigurationGift: ConfigurationGiftType
  Gift?: OnlineActivityInfo
  CbNum: CbNumType
  messageidis: number
}
const props = withDefaults(defineProps<Props>(), {
  show: false,
  submitting: false
})
let itemres: number = ref(0)
console.log(props.messageidis, '这里是父组件的值')

//监听props.messageidis的变化
watch(
  () => props.messageidis,
  (newVal, oldVal) => {
    console.log(newVal, 'newVal')

    itemres.value = newVal

    console.log(itemres.value, 'itemres')
  }
)

interface Emits {
  (e: 'on-submit'): void
  (e: 'on-add'): void
  (e: 'on-hide'): void
  (e: 'loadPromotionList'): void
}

defineOptions({
  name: 'WordGiftKind'
})

const emit = defineEmits<Emits>()
const giftFormFields = useVModel(props, 'giftFields')
const composableFields = useVModel(props, 'composableState')
const CbAllNum = useVModel(props, 'CbNum')
const active = useVModel(props, 'activeKey')
const visible = useVModel(props, 'show')

const validating = ref(false)
const FormUpdateRef = ref<FormInstance>()
const FormComposableRef = ref<FormInstance>()
const ConfigurationGiftRef = ref<FormInstance>()
const WordComposableRef = ref<InstanceType<typeof CbWordComposable>>()

function handleSubmit() {
  validating.value = true

  if (active.value === GiftKindEnum.Edit) {
    subConfigurationGift()
  } else if (active.value === GiftKindEnum.Gift) {
    validWordUpdater()
  } else {
    validWordComposable()
  }
}

function validWordUpdater() {
  FormUpdateRef.value
    ?.validate()
    .then(() => {
      emit('on-submit')
    })
    .finally(() => {
      validating.value = false
    })
}

function validWordComposable() {
  if (composableFields.value.result.length === 0) {
    return message.error('请选择组合词')
  }

  FormComposableRef.value
    ?.validate()
    .then(() => {
      emit('on-submit')
    })
    .finally(() => {
      validating.value = false
    })
}

function handleCancel() {
  emit('on-hide')
}

function resetFormFields() {
  FormUpdateRef.value?.resetFields()
  FormComposableRef.value?.resetFields()
  ConfigurationGiftRef.value?.resetFields()
  WordComposableRef.value?.bwAreaReset()
}

// 配置赠词

const configurationGift = useVModel(props, 'ConfigurationGift')

const [, editConfigurationGiftFn, editLoading] = editConfigurationGift()
async function subConfigurationGift() {
  ConfigurationGiftRef.value
    ?.validate()
    .then(async () => {
      const [err, res] = await editConfigurationGiftFn({
        ...configurationGift.value
      })
      if (err) {
        message.error(err.message || '配置失败')
      } else {
        message.success(res.data.msg || '配置成功')
        handleCancel()
        visible.value = false
        emit('loadPromotionList')
      }
    })
    .finally(() => {
      validating.value = false
    })
}

defineExpose({
  resetFormFields
})
</script>

<style lang="scss" scoped>
::v-deep(.ant-modal-body) {
  padding: 0 !important;
}

.word-gift {
  .ant-modal-body {
    padding-top: 0 !important;
  }

  .ant-tabs-tab-btn {
    font-size: 15px;
  }
}

.tip {
  color: red;
  padding: 10px 50px 0;
  margin: 0;
}
</style>
